<template>
	<view class="goodscontent">
		<!-- 分类列表 -->
		<page-head :transparent='false' :fixed="true">
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<view slot="bottom">
				<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
					<view v-for="(cate, index) in categories" :key="index" :data-cid="cate.id" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
					 @tap="tabChange($event)">
						{{ cate.name }}
					</view>
				</scroll-view>

				<order-list :orderList="sortList" :activeIndex="activeIndex" :currentIndex="sortIndex" @selectChange="sortChange"></order-list>
			</view>
		</page-head>

		<!-- 	<view style="height: 80px;"></view> -->
		<!-- 商品列表 -->
		<w-goods-list :goodsList="goodsList" :loadingText="loadingText" @eventClick="toDetail" @eventPlatform="startWebview"></w-goods-list>
	</view>
</template>

<script>
	import orderList from '../../components/order/order-list.vue';

	let page = 1,
		pageSize = 20,
		cate = 0,
		sort = 0,
		orderby = 0,
		seller = '';
	export default {
		components: {
			orderList
		},
		data() {
			return {
				//分类信息
				categories: [],
				// 当前选择的分类
				cateCurrentIndex: 0,
				//筛选分类
				sortList: [{
						id: 0,
						name: '新品',
						img: false
					},
					{
						id: 1,
						name: '优惠幅度',
						img: false
					},
					{
						id: 2,
						name: '优惠价',
						img: true,
						order: 0
					},
					{
						id: 3,
						name: '原价',
						img: true,
						order: 0
					}
				],
				//当前选择的筛选分类
				sortIndex: 0,
				activeIndex: 0,
				loadingText: '加载中...',
				goodsList: [],
				title: ''
			};
		},
		onLoad(event) {
			this.initData();
			seller = event.title;
			this.ti = seller;
			this.setTitle(seller);
			this.setNa();
			this.getNewCate();
		},
		onShow() {
			this.genToken();
		},
		onReachBottom: function() {
			this.getGoodsList();
		},
		onPullDownRefresh: function() {
			this.goodsList = [];
			page = 1;
			this.loadingText = '加载中...';
			this.getGoodsList();
		},
		methods: {
			sortChange: function(e) {
				this.loadingText = '加载中...';
				sort = e.id;
				this.sortIndex = sort;
				if (sort >= 2) {
					if (orderby == 0 || orderby == 2) {
						orderby = 1;
						this.activeIndex = 1;
					} else {
						orderby = 2;
						this.activeIndex = 2;
					}
				} else {
					orderby = 0;
					this.activeIndex = 0;
				}

				page = 1;
				this.goodsList = [];
				this.getGoodsList();
			},
			genToken() {
				const that = this
				let url = window.location.href;
				console.log("url===" + url);
				let reg_url = /^[^\?]+\?([\w\W]+)$/,
					reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
					arr_url = reg_url.exec(url),
					ret = {};
				if (arr_url && arr_url[1]) {
					let str_para = arr_url[1],
						result;
					while ((result = reg_para.exec(str_para)) != null) {
						ret[result[1]] = result[2];
					}
				}
				let token = ret.token;
				if (token != '' && token != 'null' && token != null && token != undefined && token != 'undefined') {
					// uni.setStorageSync('token', decodeURI(token));
					uni.setStorageSync('token', decodeURI(token));
					uni.setStorageSync('bump', ret.bump);
					uni.setStorageSync('relationId', ret.relationId);
					uni.setStorageSync('mobile', ret.customerId);
				}
				/* let cateId = ret.cateId;
				if (cateId != '' && cateId != 'null' && cateId != null && cateId != undefined && cateId != 'undefined') {
					// cate = cateId;
					this.genCategory();
					this.getGoodsList();
				} else {
					this.genCategory();
					this.getGoodsList();
				} */
			},
			getNewCate() {
				let url = window.location.href;
				console.log("get new cate url===" + url);
				let reg_url = /^[^\?]+\?([\w\W]+)$/,
					reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
					arr_url = reg_url.exec(url),
					ret = {};
				if (arr_url && arr_url[1]) {
					let str_para = arr_url[1],
						result;
					while ((result = reg_para.exec(str_para)) != null) {
						ret[result[1]] = result[2];
					}
				}
				this.genCategory();
				this.getGoodsList();
			},
			setTitle(title) {
				this.title = title;
				uni.setNavigationBarTitle({
					title: title
				});
			},
			setNa() {
				callNative('showSearchIcon', {
					searchLink: this.$httpUrl + 'pages/search/search'
				})
			},
			startWebview(url) {
				appNavigateTo(url);
			},
			initData() {
				page = 1;
				cate = 0;
				sort = 0;
				orderby = 0;
				seller = '';
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.categories[index].name;

				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据
				page = 1;
				this.goodsList = [];
				this.loadingText = '加载中...';
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				this.getGoodsList();
			},
			async genCategory() {
				try {
					let res = await this.$request.get('/coupon-product/self/product/classification', {
						data: {
							id: 0,
							storeId: 36
						}
					});
					let datas = res.data.data;
					let allCate = [{
						name: '全部',
						id: ''
					}];
					this.categories = allCate.concat(datas);
				} catch (e) {
					console.log(e);
				}
			},
			async getGoodsList() {
				try {
					uni.showLoading({
						title: 'loading...',
						mask: true
					});
					let sortby = orderby == 1 ? 'desc' : 'asc';
					let sortField = 'lftime';
					if (sort == 1) {
						sortField = 'customer_commision';
						sortby = 'desc';
					} else if (sort == 2) {
						sortField = 'min_price_after_discount';
						// sortField = 'min_price';
					} else if (sort == 3) {
						sortField = 'min_price';
						// sortField = 'min_price_after_discount';
					} else {
						sortField = 'lftime';
						sortby = 'desc';
					}
					let data = {
						page: page,
						pageSize: pageSize,
						cateId: cate,
						sortField: sortField,
						sortType: sortby
					};
					console.log('data====' + data);
					let res = await this.$request.get('/coupon-product/self/product/optimization', {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList != '' && newList.length > 0) {
						this.goodsList = this.goodsList.concat(newList);
						page++;
						if (page == 500 || newList.length < 20) {
							this.loadingText = '没有更多了';
						}
					} else {
						this.loadingText = '没有更多了';
					}
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			toDetail(e) {
				onEvent('page_home_icon_haopingou_goods');
				setTimeout(function() {
					h5NavigateTo({
						url: '../selfdetail/selfdetail?skuId=' + e.id + '&cid=' + e.cateids + '&title=' + e.proName + '&seller=' +
							seller
					});
				}, 1000)
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/css/goods-list.scss';

	.header-fixed {
		position: fixed;
		width: 100%;
		z-index: 999;
	}

	.sort-box {
		width: 100%;
		min-width: 750px;
	}

	view.sort-box-tab {
		width: 33.33%;
	}

	.category-row {
		width: 100%;
		height: 80px;
		line-height: 80px;
		display: inline-flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		background-color: aquamarine;

		.category-scroll {
			height: 60px;
			line-height: 60px;
			display: inline-flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;

			.scroll-view-item {
				width: 80px;
				height: 60px;
			}
		}
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}

	.page-title-row {
		width: 100%;
		height: 80px;
		background-color: red;
		display: flex;

		.back-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			height: 75px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.page-title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-weight: 300;
				color: white;
			}
		}
	}

	.header-row {
		//width: 100%;
		width: 750px;
		height: 60px;
		background-image: url('../../static/img/search/list.png');
		background-repeat: no-repeat;
		background-size: cover;

		.header-line {
			width: 100%;
			height: 60px;
			display: inline-flex;
			justify-content: flex-start;
			font-size: 30px;
			align-items: center;

			.header-range {
				width: 30%;
				height: 60px;
				justify-content: space-between;

				image {
					width: 20px;
					height: 15px;
				}

				padding-left: 10%;
			}

			.hearder-rate {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}

			.header-price {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}
		}
	}
</style>
